<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠样式表</title>
    <!--在head标签中书写style标签  写css样式-->
    <style>
        /*
        选择器，就是选中指定的标签
        标签选择器：选择器的名称就是标签的名称  会让选择器中的样式适用于页面所有对应的标签
        id选择器： id值一般是唯一的，不要数字开头   格式#id
        class选择器：class选择器名称可以无线重复   特点：.class值
        以上三个成为三大基础选择器
        样式也符合就近原则：谁理我最近我就优先使用谁  权重值越大 id的权重大于class的权重
          id选择器 > class选择器 > 标签选择器 > *通配选择器

          同权重下     内联式>外联式
          不同权重下   id选择器 > class选择器 > 标签选择器 > *通配选择器
         */
        div{
            height:200px;
            width: 200px;
            border: 1px solid gray;
        }
        #one{
            height:300px;
            width: 300px;
            border: 1px solid red;
        }
        .one{
            height:300px;
            width: 300px;
            border: 1px solid saddlebrown;
        }
        #three{
            background: yellow;
        }
        p{
            height:100px;
            width: 100px;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
<div id="one">第一个div</div>
<div>第二个div</div>
<div id="three">第三个div</div>
<div class="one">第四个div</div>
<p></p>
</body>
</html>